//
// Grid
//
// Section
.elementor-section {
	position: relative;

	// Container
	.elementor-container {
		display: flex;
		margin-inline: auto;
		position: relative;

		@media (max-width: $screen-tablet-max) {
			flex-wrap: wrap;
		}
	}

	// Max-width of container depending on section settings
	&.elementor-section-boxed {
		& > .elementor-container {
			max-width: 1140px;
		}
	}

	// Stretched section settings
	&.elementor-section-stretched {
		position: relative;
		width: 100%;
	}

	// In section min-height / fit to screen mode
	&.elementor-section-items- {

		&top {

			> .elementor-container {
				align-items: flex-start;
			}
		}

		&middle {

			> .elementor-container {
				align-items: center;
			}
		}

		&bottom {

			> .elementor-container {
				align-items: flex-end;
			}
		}
	}

	@media (min-width:$screen-mobile-next) {

		// Section Full Height (note: don't be smart - min-height does not work well with the content position)
		&.elementor-section-height-full {
			height: 100vh;

			> .elementor-container {
				height: 100%;
			}
		}
	}
}

// TODO: BC since 2.7.0
.elementor-bc-flex-widget {

	.elementor-section-content-top {

		> .elementor-container {

			> .elementor-column {

				> .elementor-widget-wrap {
					align-items: flex-start;
				}
			}
		}
	}

	.elementor-section-content-middle {

		> .elementor-container {

			> .elementor-column {

				> .elementor-widget-wrap {
					align-items: center;
				}
			}
		}
	}

	.elementor-section-content-bottom {

		> .elementor-container {

			> .elementor-column {

				> .elementor-widget-wrap {
					align-items: flex-end;
				}
			}
		}
	}
}

// Widget
.elementor-widget-wrap {
	position: relative;
	width: 100%;
	flex-wrap: wrap;
	align-content: flex-start;

	.elementor:not(.elementor-bc-flex-widget) & {
		display: flex;
	}

	> .elementor-element {
		width: 100%;
	}

	// The Swiper will overlap the column width when applying custom margin values on the column.
	&.e-swiper-container {
		width: calc(100% - (var(--e-column-margin-left, 0px) + var(--e-column-margin-right, 0px)));
	}
}

.elementor-widget {
	position: relative;

	&:not(:last-child) {
		margin-block-end: var(--kit-widget-spacing, 20px);

		&.elementor-widget__width-auto,
		&.elementor-widget__width-initial,
		&.elementor-absolute {
			margin-block-end: 0;
		}
	}
}

// Columns
.elementor-column {
	position: relative;
	min-height: 1px;
	display: flex;
}

@mixin elementor-grid-classes {

	@each $sizeKey, $size in $column-sizes {

		&.elementor-col-#{$sizeKey}, &[data-col="#{$sizeKey}"] {
			width: $size;
		}
	}
}

@mixin elementor-responsive($breakpoint-name) {

	@each $size-name, $size in $column-sizes {

		&.elementor-#{$breakpoint-name}-#{$size-name} {
			width: $size;
		}
	}

}

// Columns Gap
.elementor-column {

	> .elementor-element-populated {

		.elementor-column-gap-narrow  > & {
			padding: 5px;
		}

		.elementor-column-gap-default > & {
			padding: 10px;
		}

		.elementor-column-gap-extended > & {
			padding: 15px;
		}

		.elementor-column-gap-wide > & {
			padding: 20px;
		}

		.elementor-column-gap-wider > & {
			padding: 30px;
		}
	}
}

// Columns Gap for Inner section
.elementor-inner-section {

	.elementor-column-gap-no {

		.elementor-element-populated {
			padding: 0;
		}
	}
}

// Responsive Grid
@media (min-width:$screen-mobile-next) {

	.elementor-column {
		@include elementor-grid-classes;
	}
}

.elementor-column {

	@media (max-width: 479px) {
		@include elementor-responsive(xs);
	}

	@media (max-width: $screen-mobile-max) {
		@include elementor-responsive(sm);
	}

	@media (min-width:$screen-mobile-next) and (max-width: $screen-tablet-max) {
		@include elementor-responsive(md);
	}
}

@mixin reverse-columns($device) {

	.elementor-reverse#{$device} > .elementor-container {
		@for $i from 1 through 10 {
			> :nth-child(#{$i}) {
				order: -$i + 11;
			}
		}
	}
}

@mixin reverse-columns-initial($device) {

	.elementor-reverse#{$device} > .elementor-container {
		@for $i from 1 through 10 {
			> :nth-child(#{$i}) {
				order: initial;
			}
		}
	}
}

@media (min-width:$screen-widescreen-min) {
	@include reverse-columns(-widescreen);
}

@media (min-width:$screen-tablet-next) and (max-width: $screen-laptop-max) {
	@include reverse-columns(-laptop);
}

@media (min-width:$screen-tablet-extra-next) and (max-width: $screen-laptop-max) {
	@include reverse-columns(-laptop);
}

@media (min-width:$screen-tablet-next) and (max-width: $screen-tablet-extra-max) {
	@include reverse-columns-initial(-laptop);
	@include reverse-columns(-tablet_extra);
}

@media (min-width:$screen-mobile-next) and (max-width: $screen-tablet-max) {
	@include reverse-columns(-tablet);
}

@media (min-width:$screen-mobile-extra-next) and (max-width: $screen-tablet-max) {
	@include reverse-columns(-tablet);
}

@media (min-width:$screen-mobile-next) and (max-width: $screen-mobile-extra-max) {
	@include reverse-columns-initial(-tablet);
	@include reverse-columns(-mobile_extra);
}

@media (max-width: $screen-mobile-max) {
	@include reverse-columns(-mobile);

	.elementor-column {
		width: 100%; //Default width for mobile
	}
}

// Simple 12 Columns responsive grid
.elementor-grid {
	display: grid;
	grid-column-gap: var(--grid-column-gap);
	grid-row-gap: var(--grid-row-gap);

	.elementor-grid-item {
		min-width: 0; // Prevent columns from overflowing the grid area in Firefox browser (Doesn't seem to do anything  --Josh)
	}

	@mixin grid_loop($device) {

		&#{$device}-0 {
			.elementor-grid {
				display: inline-block;
				width: 100%;
				word-spacing: var(--grid-column-gap);
				margin-block-end: calc(-1 * var(--grid-row-gap));

				.elementor-grid-item {
					display: inline-block;
					margin-block-end: var(--grid-row-gap);
					word-break: break-word;
				}
			}
		}

		@for $i from 1 through 12 {

			&#{$device}-#{$i} {
				.elementor-grid {
					grid-template-columns: repeat(#{$i} , 1fr);
				}
			}
		}
	}

	@include grid_loop('');

	@media (min-width: $screen-widescreen-min) {
		@include grid_loop(-widescreen);
	}

	@media (max-width: $screen-laptop-max) {
		@include grid_loop(-laptop);
	}

	@media (max-width: $screen-tablet-extra-max) {
		@include grid_loop(-tablet_extra);
	}

	@media (max-width: $screen-tablet-max) {
		@include grid_loop(-tablet);
	}

	@media (max-width: $screen-mobile-extra-max) {
		@include grid_loop(-mobile_extra);
	}

	@media (max-width: $screen-mobile-max) {
		@include grid_loop(-mobile);
	}
}
